<template>
  <div class="pz-table">
    <el-table
      size="small"
      :data="table1"
      border
      header-cell-class-name="pzHeader nopadding"
    >
      <el-table-column
        label="T 100%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="R1.11 100%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="R1.33 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="C 125%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="A1.11 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="A1.33 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="M 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="雅赛尔 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="M-YD 103%"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table>
    <el-table
      style="margin-top:12px"
      size="small"
      :data="table2"
      border
      header-cell-class-name="pzHeader "
    >
      <el-table-column
        label="线速"
        prop="name"
        align="center"
        min-width="10%"
      ></el-table-column
      ><el-table-column
        label="效率"
        prop="name"
        align="center"
        min-width="10%"
      ></el-table-column
      ><el-table-column
        label="定量"
        prop="name"
        align="center"
        min-width="10%"
      ></el-table-column
      ><el-table-column
        label="锭数"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="包装"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="批号"
        prop="name"
        align="center"
        min-width="10%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="内包装袋"
        prop="name"
        align="center"
        min-width="16%"
        :render-header="renderHeader"
      ></el-table-column
      ><el-table-column
        label="捆绳"
        prop="name"
        align="center"
        min-width="20%"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table1: [{ name: 1 }],
      table2: [{ name: 1 }]
    };
  },
  methods: {
    renderHeader(h, { column }) {
      let header = column.label.split(' ');
      return [
        h('div', [
          h('div', { style: 'lineHeight:18px' }, header[0]),
          h('span', {}, header[1])
        ])
      ];
    }
  }
};
</script>

<style lang="scss">
.pz-table .el-table {
  border-color: #cfd4d8;
  .pzHeader {
    background: #f2f5f8 !important;
    .cell {
      color: #48556a;
      font-weight: 400;
    }
    &.nopadding,
    &.nopadding .cell {
      padding: 0;
    }
  }

  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-color: #cfd4d8;
  }
  tbody .el-table__row:last-child td.el-table__cell {
    border-bottom: none;
  }
}
.pz-table {
  .el-table::before,
  .el-table--group::after,
  .el-table--border::after {
    background-color: #cfd4d8;
  }
}
</style>
